<template>
  <el-container direction="vertical">
    <el-form :model="userForm" ref="userForm">
      <el-form-item label="ID" prop="id">
        <el-input v-model="userForm.id" disabled></el-input>
      </el-form-item>
      <el-form-item label="姓名" prop="userName">
        <el-input v-model="userForm.userName" clearable ></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-select v-model="userForm.sex" style="width: 100%">
          <el-option
            v-for="item in sex"
            :key="item.id"
            :label="item.name"
            :value="item.name">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model="userForm.age" clearable ></el-input>
      </el-form-item>
      <el-form-item label="身份" prop="role">
        <el-select v-model="userForm.role"style="width: 100%" disabled>
          <el-option
            v-for="item in roles"
            :key="item.id"
            :label="item.name"
            :value="item.name">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="住址" prop="address">
        <el-input type="textarea" v-model="userForm.address" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('userForm')">保存</el-button>
        <el-button @click="$router.go(-1)">取消</el-button>
      </el-form-item>
    </el-form>
  </el-container>
</template>

<script>
  import Qs from 'qs'
  export default {
    name: "ModifyInfoPage",
    data(){
      return{
        user: {},
        userForm:{},
        roles:[
          {id:1,name:'管理员'},
          {id:2,name:'学生'},
          {id:3,name:'食堂'}
        ],
        sex:[
          {id:1,name:'男'},
          {id:2,name:'女'},
          {id:3,name:'未知'}
        ],
      }
    },
    created() {
      let userStr = sessionStorage.getItem('user') || '{}';
      this.user = JSON.parse(userStr);
      /*加载当前用户的信息*/
      this.getUserOne();
    },
    methods:{
      /*获取当前用户信息*/
      getUserOne(){
        this.$http.get('/user/selectOne',{
          params: {
            id:this.user.id
          }
        }).then((response)=>{
          if(response.status === 200){
            if(response.data.code === 10000){
              this.userForm = response.data.data;
            }else{
              this.userForm = {};
              this.$notify.error({
                title: '错误',
                message: response.data.msg,
                duration: 1000
              });
            }
          }else{
            this.$notify.error({
              title: '错误',
              message: response.status + response.statusText,
              duration: 1000
            });
          }
        })
      },
      /* 提交表单函数 */
      submitForm(formName){
            let params = Qs.stringify(this.userForm);
            this.$http.put('/user/info',params).then((response)=>{
                if(response.status === 200){
                  if(response.data.code === 10000){
                    this.$notify({
                      title: '修改成功',
                      type: 'success',
                      duration: 1000
                    });
                  }else{
                    this.$notify.error({
                      title: '错误',
                      message: response.data.msg,
                      duration: 1000
                    });
                  }
                }else{
                  this.$notify.error({
                    title: '错误',
                    message: response.status + response.statusText,
                    duration: 1000
                  });
                }
              })
      },
      /* 重置表单函数 */
      resetForm(formName){
        this.$refs[formName].resetFields();
      }
    }
  }

</script>

<style scoped>
.el-form-item {
  margin: 0 0 15px;
}
</style>
